<template>
  <span style="display: flex; align-items: center"
    ><el-image style="width: 18px; height: 18px" :src="url"></el-image
  ></span>
</template>
<script setup>
import { ref, reactive, onMounted, watch, computed } from "vue"

const props = defineProps({
  isDir: Boolean,
  ext: String,
})

const BASE_PATH = "src/assets/icon/"

const icons = reactive({
  dir: `${BASE_PATH}file.png`,
  unknow: `${BASE_PATH}unknow.png`,
  ".gz": `${BASE_PATH}zip.png`,
  ".rar": `${BASE_PATH}zip.png`,
  ".zip": `${BASE_PATH}zip.png`,
  ".png": `${BASE_PATH}image.png`,
  ".jpg": `${BASE_PATH}image.png`,
  ".gif": `${BASE_PATH}image.png`,
  ".bmp": `${BASE_PATH}image.png`,
  ".doc": `${BASE_PATH}doc.png`,
  ".docx": `${BASE_PATH}doc.png`,
  ".ppt": `${BASE_PATH}ppt.png`,
  ".pptx": `${BASE_PATH}ppt.png`,
  ".txt": `${BASE_PATH}txt.png`,
  ".pdf": `${BASE_PATH}pdf.png`,
  ".exe": `${BASE_PATH}exe.png`,
  ".mp3": `${BASE_PATH}music.png`,
  ".ini": `${BASE_PATH}config.png`,
  ".config": `${BASE_PATH}config.png`,
  ".conf": `${BASE_PATH}config.png`,
  ".sql": `${BASE_PATH}db.png`,
  ".xls": `${BASE_PATH}xls.png`,
  ".xlsx": `${BASE_PATH}xls.png`,
  ".c": `${BASE_PATH}c.png`,
  ".cpp": `${BASE_PATH}cpp.png`,
  ".js": `${BASE_PATH}js.png`,
  ".jsx": `${BASE_PATH}jsx.png`,
  ".html": `${BASE_PATH}html.png`,
  ".css": `${BASE_PATH}css.png`,
  ".java": `${BASE_PATH}java.png`,
  ".py": `${BASE_PATH}py.png`,
  ".php": `${BASE_PATH}php.png`,
  ".json": `${BASE_PATH}json.png`,
  ".md": `${BASE_PATH}md.png`,
  ".gitignore": `${BASE_PATH}gitignore.png`,
  ".lock": `${BASE_PATH}lock.png`,
  ".vue": `${BASE_PATH}vue.png`,
  ".psd": `${BASE_PATH}psd.png`,
  ".sass": `${BASE_PATH}sass.png`,
  ".less": `${BASE_PATH}less.png`,
  ".go": `${BASE_PATH}go.png`,
  ".cs": `${BASE_PATH}cs.png`,
})

const url = computed(() => {
  if (props.isDir) {
    return icons["dir"]
  } else {
    if (typeof icons[props.ext] === "undefined" || icons[props.ext] === null) {
      return icons["unknow"]
    } else {
      return icons[props.ext]
    }
  }
})
</script>
